<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WaterFall</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 785px;
            height: auto;
            margin: 10px auto;
            border: 1px solid #e74f4d;
            overflow: auto;
        }

        .container ul{
            list-style: none;
            width: 227px;
            margin: 12px;
            float: left;
        }

        .container li{
            width: 100%;
            border: 1px solid green;
            margin: 12px;
        }

    </style>
</head>
<body>
    <div class="container">
        <ul class="waterfall">
            <li>
                <img src="img/1.jpg" alt=''>
                <p>1.jpeg</p>
            </li>
            <li>
                <img src="img/3.jpg" alt=''>
                <p>2.jpeg</p>
            </li>
            <li>
                <img src="img/2.jpg" alt=''>
                <p>3.jpeg</p>
            </li>
            <li>
                <img src="img/4.jpg" alt=''>
                <p>4.jpeg</p>
            </li>
        </ul>
        <ul class="waterfall">
            <li>
                <img src="img/5.jpg" alt=''>
                <p>5.jpeg</p>
            </li>
            <li>
                <img src="img/6.jpg" alt=''>
                <p>6.jpeg</p>
            </li>
            <li>
                <img src="img/7.jpg" alt=''>
                <p>7.jpeg</p>
            </li>
            <li>
                <img src="img/8.jpg" alt=''>
                <p>8.jpeg</p>
            </li>
        </ul>
        <ul class="waterfall">
            <li>
                <img src="img/7.jpg" alt=''>
                <p>7.jpeg</p>
            </li>
            <li>
                <img src="img/1.jpg" alt=''>
                <p>1.jpeg</p>
            </li>
            <li>
                <img src="img/3.jpg" alt=''>
                <p>3.jpeg</p>
            </li>
            <li>
                <img src="img/2.jpg" alt=''>
                <p>2.jpeg</p>
            </li>
        </ul>
    </div>

    <script>
        +function () {
            var ul = document.getElementsByClassName('waterfall');
            var toBottom = true;

            window.onscroll = function (event) {
                //获取视口高度和滚轮滑动距离
                var viewHeight = document.documentElement.clientHeight;
                var scrollTop = document.body.scrollTop;

                //遍历瀑布流布局的ul
                //获取每一个ul的最后一个li距离顶部的距离
                for(var i = 0; i < ul.length; i++){
                    var childLis = ul[i].getElementsByTagName('li');
                    var lastLi = childLis[childLis.length-1];

                    if(getPos(lastLi) < viewHeight + scrollTop && toBottom){
                        toBottom = false;

                        //异步继续加载图片
                        var xhr = new XMLHttpRequest();
                        xhr.open('get', "data.txt", true);
                        xhr.send();
                        xhr.onreadystatechange = function () {
                            if(xhr.readyState == 4){
                                var jsonData = JSON.parse(xhr.responseText);

                                var list = jsonData.list;
                                console.log(list);

                                for(var j = 0; j < list.length; j++){
                                    for(var m in list[j]){
                                        var img = document.createElement('img');
                                        img.src = list[j][m];
                                        var li = document.createElement('li');
                                        li.appendChild(img);
                                        ul[j].appendChild(li);
                                    }
                                }
                            }
                        };

                    }
                }
            };

            //获取相对视口顶部的距离
            function getPos(obj) {
                var top = 0;

                while(obj){
                    top += obj.offsetTop;
                    obj = obj.offsetParent;
                }
                return top;
            }


        }();
    </script>
</body>
</html>